<template>
  <div class="punctuation-container">
    <purchase-header/>
    <div class="body-purchase">
      <div class="nav-purchase w">
        <span @click="allCategory">全部分类</span>
      </div>
      <div class="category-purchase w">
        <div class="tit-category">
          <h3>所属分类</h3>
        </div>
        <div class="list-category">
          <ul>
            <li v-for="item in categories" :key="item.category_id">
              <router-link :to="getCategoryUrl(item.category_id)">{{ item.name }}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="filter-purchase w">
        <div class="inner-filter">
          <el-select v-model="params.price_type" size="small" clearable placeholder="价格说明">
            <el-option label="可议价" :value="0"></el-option>
            <el-option label="不可议价" :value="1"></el-option>
            <el-option label="面议" :value="2"></el-option>
          </el-select>

          <div class="sort-box" @click="handleSort('create_time')">
            <span>信息发布时间</span>
            <div class="icon-box">
              <i
                class="icon-up el-icon-caret-top"
                :class="{selected: params.sort_val === 'create_time' && params.sort_type === 'desc' }"
              ></i>
              <i
                class="icon-down el-icon-caret-bottom"
                :class="{selected: params.sort_val === 'create_time' && params.sort_type === 'asc' }"
              ></i>
            </div>
          </div>
          <div class="sort-box" @click="handleSort('closing_date')">
            <span>信息截止时间</span>
            <div class="icon-box">
              <i
                class="icon-up el-icon-caret-top"
                :class="{selected: params.sort_val === 'closing_date' && params.sort_type === 'desc' }"
              ></i>
              <i
                class="icon-down el-icon-caret-bottom"
                :class="{selected: params.sort_val === 'closing_date' && params.sort_type === 'asc' }"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="list-purchase w">
        <ul v-if="purchaseData && purchaseData.data && purchaseData.data.length">
          <li v-for="item in purchaseData.data" :key="item.purchase_id" class="item-purchase">
            <router-link :to="'/purchase/detail?purchase_id=' + item.purchase_id" target="_blank">
              <dl class="content-purchase">
                <dt class="top">
                  <h3 class="title">
                    <a>{{ item.title }}</a>
                  </h3>
                  <div class="num">
                    <a>采购数量：<strong>{{ item.goods_num }}</strong>{{ item.goods_unit }}</a>
                  </div>
                  <div class="buyer">
                    <a>求&nbsp;&nbsp;购&nbsp;方：{{ item.contact_name }}</a>
                  </div>
                </dt>
                <dd class="middle">
                  <div class="time">
                    <a>
                      <span>发布时间：</span>{{ item.create_time | unixToDate }}</a>
                  </div>
                  <div>
                    <a>
                      <span>商品名称：</span>{{ item.goods_names }}</a>
                  </div>
                  <div class="price">
                    <a>
                      <span>价格说明：</span> <span class="price-memo">{{ getPriceMemoText(item.price_type) }}</span> </a>
                  </div>
                  <div class="info">
                    <a>
                      <span>详细说明：</span> {{ item.purchase_explain || '无' }}
                    </a>
                  </div>
                </dd>
                <dd class="bottom">
                  <div class="quoted">
                    <a>已有报价：<em>{{ item.quotation_num || 0 }}</em>条</a>
                  </div>
                  <div class="countdown">
                    <a href="javascript:;">距离报价结束<strong>{{ distanceDay(item) }}</strong>天</a>
                  </div>
                  <div class="quotation">
                    <a :href="getAddQuotationUrl(item)" target="_blank">立即报价</a>
                  </div>
                </dd>
              </dl>
            </router-link>
          </li>
        </ul>
        <div v-else class="no-data">暂无数据...</div>
        <div v-if="purchaseData && purchaseData.data && purchaseData.data.length" class="member-pagination">
          <el-pagination
            @current-change="handleCurrentPageChange"
            :current-page.sync="params.page_no"
            :page-size="params.page_size"
            layout="total, prev, pager, next"
            :total="purchaseData.data_total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Pagination, Select, Option } from 'element-ui'

Vue.use(Pagination).use(Select).use(Option)
import PurchaseHeader from './-PurchaseHeader'
import { mapActions, mapGetters } from 'vuex'
import * as API_Purchase from '@/api/purchase'

export default {
  name: 'purchase-list',
  components: { PurchaseHeader },
  layout: 'full',
  head() {
    return {
      title: `采购单-${this.site.title}`
    }
  },
  data() {
    return {
      params: {
        page_no: 1,
        page_size: 8,
        keyword: '',
        goods_category: '',
        price_type: '',
        sort_val: 'create_time',
        sort_type: 'asc'
      },
      purchaseData: ''
    }
  },
  computed: {
    ...mapGetters(['categories', 'site'])
  },
  watch: {
    params: {
      deep: true,
      handler: 'GET_PurchaseList'
    }
  },
  mounted() {
    const { keyword, goods_category } = this.$route.query
    this.params.keyword = keyword
    this.params.goods_category = goods_category
    // this.GET_PurchaseList()
  },
  methods: {
    /** 获取采购单列表 */
    async GET_PurchaseList() {
      const params = JSON.parse(JSON.stringify(this.params))
      params.title = params.keyword
      delete params.keyword
      const res = await API_Purchase.getPurchaseListBySearch(params)
      this.purchaseData = res
    },
    /** 点击全部分类，显示采购单列表 */
    allCategory() {
      this.params.goods_category = ''
    },
    /** 获取议价方式文字 */
    getPriceMemoText(type) {
      switch (type) {
        case 0:
          return '可议价'
        case 1:
          return '不可议价'
        case 2:
          return '面议'
      }
    },
    /** 获取添加报价单URL */
    getAddQuotationUrl(item) {
      let url = this.MixinDomain.seller
      url += '/order/quotations/add'
      url += `?purchase_id=${item.purchase_id}`
      return url
    },
    /** 获取距离结束时间 */
    distanceDay(item) {
      let closing_date = item.closing_date * 1000
      const nowTime = new Date().getTime()
      let day = (closing_date - nowTime) / 86400000
      day = Math.floor(day)
      if (day < 0) {
        return 0
      }
      return `${day}`
    },
    /** 获取分类URL */
    getCategoryUrl(cat_id) {
      let url = '/purchase?'
      const params = JSON.parse(JSON.stringify(this.params))
      params.goods_category = cat_id
      const paramsArray = []
      Object.keys(params).forEach(key => {
        if (!params[key]) return
        paramsArray.push(`${key}=${params[key]}`)
      })
      url += paramsArray.join('&')
      return url
    },
    /** 排序 */
    handleSort(sort_val) {
      let sort_type = this.params.sort_type === 'desc' ? 'asc' : 'desc'
      if (this.params.sort_val !== sort_val) {
        sort_type = 'asc'
      }
      if (sort_val === 'create_time') {
        this.params.sort_val = 'create_time'
      } else {
        this.params.sort_val = 'closing_date'
      }
      this.params.sort_type = sort_type
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
.punctuation-container {
  background-color: #f5f5f5;
}
.member-pagination {
  margin-left: 970px;
}
.nav-purchase {
  margin-top: 15px;
  span {
    cursor: pointer;
    &:hover {
      color: $color-main;
    }
  }
}
.category-purchase {
  border: solid 1px #E1E1E1;
  background-color: #ffffff;
  margin-top: 15px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  .tit-category {
    float: left;
    background-color: #F5F5F5;
    width: 60px;
    padding: 9px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
  }
  .list-category {
    float: left;
    padding: 9px 18px 0;
    width: 1084px;
    margin-left: 78px;
    li {
      float: left;
      margin-right: 40px;
      height: 28px;
    }
  }
}
.list-purchase {
  background-color: #ffffff;
  padding: 10px;
  margin-top: 15px;
  box-sizing: border-box;
  min-height: 500px;
  .item-purchase {
    display: inline-block;
    *display: inline;
    width: 25%;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    cursor: pointer;
    .content-purchase {
      font-size: 12px;
      border: solid 1px #E1E1E1;
      margin: 20px 10px 1px 10px;
      text-align: left;
      &:hover {
        border-width: 2px;
        border-color: $color-main;
        margin: 19px 9px 0 9px;
      }
      a {
        color: #777
      }
      a:hover {
        color: $color-main
      }
      dt {
        &.top {
          display: block;
          background-color: #EFF3F9;
          padding: 10px;
          color: #555;
          line-height: 20px;
          .title {
            display: block;
            width: 100%;
            height: 20px;
            margin-bottom: 5px;
            overflow: hidden;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            a {
              color: #1E50A2;
            }
          }
          .num a strong {
            color: #e4393c;
            margin: 0 5px 0 0;
            font-size: 14px;
          }
        }
      }
      dd {
        &.middle {
          display: block;
          position: relative;
          z-index: 1;
          padding: 5px 10px;
          color: #777;
          div {
            line-height: 28px;
          }
          .pic {
            position: absolute;
            z-index: 1;
            top: 9px;
            right: 9px;
            width: 60px;
            height: 60px;
            border: dashed 1px #F1F1F1;
          }
          .info {
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            margin: 4px 0;
          }
          .price a em {
            color: #D00;
            margin-right: 4px;
          }
          .price-memo {
            display: inline-block;
            height: 18px;
            padding: 0 5px;
            margin-left: 4px;
            border-radius: 2px;
            background-color: #EFF3F9;
            border: solid 1px #E1E1E1;
            color: #1E50A2;
            line-height: 18px;
          }
        }
        &.bottom {
          position: relative;
          z-index: 1;
          padding: 5px 10px;
          background-color: #FBFBFB;
          border-top: dotted 1px #E1E1E1;
          color: #555;
          line-height: 20px;
          .quoted a em {
            color: #333;
            margin: 0 4px 0 0;
            font-weight: 700;
          }
          .countdown a {
            color: #e4393c;
          }
          .countdown a strong {
            font-size: 14px;
            margin: 0 2px;
          }
          .quotation {
            position: absolute;
            z-index: 1;
            top: 10px;
            right: 10px;
          }
          .quotation a {
            display: block;
            padding: 6px 10px;
            background-color: #FFFAF6;
            border: 1px solid #FEDDC7;
            color: #EEA26F;
            line-height: 18px;
          }
        }
      }
    }
  }
}
.filter-purchase {
  display: flex;
  align-items: center;
  height: 50px;
  box-sizing: border-box;
  padding: 0 10px;
  border: solid 1px #E1E1E1;
  border-top: none;
  .inner-filter {
    display: flex;
    align-items: center;
  }
  .sort-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 136px;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-left: 10px;
    border: solid 1px #E1E1E1;
    cursor: pointer;
    .icon-box {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      i {
        position: relative;
        font-size: 14px;
        &.selected {
          color: $color-main;
        }
      }
      .icon-up {
        top: 2px
      }
      .icon-down {
        top: -2px
      }
    }
  }
  /deep/ {
    .el-select {
      width: 136px;
    }
  }
}
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  font-size: 14px;
}
</style>
